<template>
   <div class="p-4">
      <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
         <template #toolbar>
            <el-button type="primary" @click="handleCreate">新增菜单</el-button>
         </template>

         <template #type="{ record }">
            <span v-if="record.type === 0">目录</span>
            <span v-else-if="record.type === 1">页面</span>
            <span v-else="record.type===2">action</span>
         </template>

         <template #action="{ record }">
            <TableAction :actions="[
               {
                  icon: 'note-edit-line|svg',
                  tooltip: '编辑菜单资料',
                  color: '#409eff',
                  onClick: handleEdit.bind(null, record)
               },
               {
                  icon: 'delete-outlined|svg',
                  color: '#f56c6c',
                  tooltip: '删除此菜单',
                  popConfirm: {
                     title: '是否确认删除',
                     okText: '确认',
                     cancelText: '取消',
                     confirm: handleDelete.bind(null, record)
                  }
               }
            ]" />
         </template>
      </BasicTable>
      <MenuModal @register="registerModal" @success="handleSuccess"></MenuModal>
   </div>
</template>

<script lang="ts" setup>
import { deleteMenuById, getMenuListByPage, getMenuListByPid } from '@/api/system/menu';
import { MenuModel } from '@/api/system/model/menuModel';
import { useTable } from '@/components/Table';
import { ElMessage } from 'element-plus';
import { columns, searchFormSchema } from './menu.data';
import { Recordable } from '/#/global';
import MenuModal from './MenuModal.vue';
import { useModal } from '@/components/Modal';




const [registerModal, { openModal }] = useModal();



const loadMenu = (
   row: MenuModel,
   treeNode: unknown,
   resolve: (date: MenuModel[]) => void
) => {
   setTimeout(async () => {
      const res = await getMenuListByPid(row.id)
      // 更新表格数据
      row.children = res
      updateTableDataRecord(row.id, row)
      resolve(res)
   }, 1000)
}

const [registerTable, { reload, updateTableDataRecord, deleteTableDataRecord }] = useTable({
   title: '菜单列表',
   api: getMenuListByPage,
   rowKey: 'id',
   columns,
   formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
      // autoSubmitOnEnter: true
   },
   lazy: true,
   load: loadMenu,
   treeProps: { children: 'children', hasChildren: 'hasChildren' },
   highlightCurrentRow: true,
   useSearchForm: true,
   showTableSetting: true,
   border: true,
   pagination: {
   },
   handleSearchInfoFn(info) {
      console.log('handleSearchInfoFn', info)
      return info
   },
   actionColumn: {
      id: 'action',
      width: 160,
      label: '操作',
      slots: { customRender: 'action' }
   }
})



function onFetchSuccess(data: Recordable) {
   ElMessage({
      message: '加载表格数据成功',
      type: 'success',
   })
}

function handleCreate() {
   openModal(true, {
      isUpdate: false,
   });
}


async function handleDelete(record: Recordable) {
   await deleteMenuById(record.id)
   deleteTableDataRecord(record.id)
   ElMessage({
      message: `删除菜单${record.title}成功`,
      type: 'success',
   })
}
function handleEdit(record: Recordable) {
   console.log(record)
   openModal(true, {
      record,
      isUpdate: true,
   });
}

function handleSuccess({ isUpdate, values }: Recordable) {
   if (isUpdate) {
      console.log(values)
      // 演示不刷新表格直接更新内部数据。
      // 注意：updateTableDataRecord要求表格的rowKey存在于每一行的record的keys中
      const result = updateTableDataRecord(values.id, values);
      ElMessage({
         message: isUpdate ? `${values.title}更新成功` : `${values.title}新增成功`,
         type: 'success',
      })
   } else {
      reload();
   }
}
</script>